<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="firstname">+
			<input type="text" v-model="lastname">=
			<input type="text" v-model="fullname">	
		</div>
	</body>
	<script>
		
		var vu=new Vue({
			el:"#app",
			data:{
				firstname:'',
				lastname:'',
				fullname:''
			},
			methods:{
			},
			watch:{
				//使用这个属性，可以监视 data中指定数据的变化，然后触发这个watch中对应的function处理函数
				'firstname':function(newVal,oldVal){
					//console.log('监视到了firstname的变化')
					console.log("新:"+newVal)
					console.log("旧:"+oldVal)
					this.fullname=this.firstname+'-'+this.lastname;
				},
				'lastname':function(){
					//console.log('监视到了lastname的变化')
					this.fullname=this.firstname+'-'+this.lastname;
				}
			}
			
			
		});
	</script>
</html>